body {
  position: relative;
}


:root {
  --sidebar-bg: #f6f8fa;
  --global-font-size: 14px;
  --global-bg: #fff;
  --font-color: #4c4948;
  --hr-border: #d2ebfd;
  --hr-before-color: #bfe4fb;
  --search-bg: #f6f8fa;

  --nav-bg: #f6f8fa;
  --nav-font-color: black;

  --blog-primary-color: #1677FF;

  --primary-color-01: #f9f0ff;
  --primary-color-02: #efdbff;
  --primary-color-03: #d3adf7;
  --primary-color-04: #b37feb;
  --primary-color-05: #9254de;
  --primary-color-06: #722ed1;
  --primary-color-07: #531dab;
  --primary-color-08: #391085;
  --primary-color-09: #22075e;
  --primary-color-10: #120338;



  --blog-empty-bg: #FFF;
  --blog-background-card-color: #FFF;

  --blog-card-border-radius: 8px;
}


.page-container {
  width: 100%;
}

/*滚动条样式*/
body {
  overflow-y: scroll;

  /*滚动条里面轨道*/
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0);
    background-color: transparent;
  }

  /*定义滚动条整体的样式*/
  &::-webkit-scrollbar {
    position: absolute;
    width: 8px;
    background-color: transparent;
  }

  /*滚动条的样式*/
  &::-webkit-scrollbar-thumb {
    height: 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
  }
}



//:root {
//  --sidebar-bg: #f6f8fa;
//  --global-font-size: 14px;
//  --global-bg: #fff;
//  --font-color: #4c4948;
//  --hr-border: #d2ebfd;
//  --hr-before-color: #bfe4fb;
//  --search-bg: #f6f8fa;
//  --search-input-color: #4c4948;
//  --search-a-color: #4c4948;
//  --preloader-bg: #37474f;
//  --preloader-color: #fff;
//  --tab-border-color: #f0f0f0;
//  --tab-botton-bg: #f0f0f0;
//  --tab-botton-color: #1f2d3d;
//  --tab-button-hover-bg: #dcdcdc;
//  --tab-button-active-bg: #fff;
//  --card-bg: #fff;
//  --btn-hover-color: #ff7242;
//  --btn-color: #fff;
//  --btn-bg: #49b1f5;
//  --text-bg-hover: rgba(73, 177, 245, 0.7);
//  --light-grey: #eee;
//  --dark-grey: #cacaca;
//  --white: #fff;
//  --text-highlight-color: #1f2d3d;
//  --blockquote-color: #6a737d;
//  --blockquote-bg: rgba(73, 177, 245, 0.1);
//  --reward-pop: #f5f5f5;
//  --toc-link-color: #666261;
//  --card-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
//  --card-hover-box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.09);
//  --pseudo-hover: #ff7242;
//  --headline-presudo: #a0a0a0;
//  --scrollbar-color: #49b1f5;
//  --default-bg-color: #49b1f5;
//  --zoom-bg: #fff;
//  --mark-bg: rgba(0, 0, 0, 0.3);
//}
//
//#page-header.full_page {
//  height: 100vh;
//  background-attachment: fixed;
//}
//
//#page-header {
//  position: relative;
//  width: 100%;
//  background-color: #49b1f5;
//  background-position: center center;
//  background-size: cover;
//  background-repeat: no-repeat;
//  transition: all 0.5s;
//  background-image: url('@/assets/images/bg/20230504b1dh5i.png') !important;
//}
//
//#page-header:not(.not-top-img):before {
//  position: absolute;
//  width: 100%;
//  height: 100%;
//  background-color: var(--mark-bg);
//  content: '';
//}
//
//#nav.show {
//  opacity: 1;
//  -ms-filter: none;
//  filter: none;
//  animation: headerNoOpacity 1s;
//}
//
//#nav.show {
//  -webkit-animation: headerNoOpacity 1s;
//  -moz-animation: headerNoOpacity 1s;
//  -o-animation: headerNoOpacity 1s;
//  -ms-animation: headerNoOpacity 1s;
//  animation: headerNoOpacity 1s;
//}
//
//#nav {
//  position: absolute;
//  top: 0;
//  z-index: 90;
//  display: flex;
//  align-items: center;
//  padding: 0 36px;
//  width: 100%;
//  height: 60px;
//  font-size: 1.3em;
//  opacity: 0;
//  filter: alpha(opacity=0);
//  transition: all 0.5s;
//}
//
//nav {
//  display: block;
//  unicode-bidi: isolate;
//}
//
//#nav #blog-info {
//  overflow: hidden;
//  -o-text-overflow: ellipsis;
//  text-overflow: ellipsis;
//  white-space: nowrap;
//  -webkit-box-flex: 1;
//  -moz-box-flex: 1;
//  -o-box-flex: 1;
//  box-flex: 1;
//  -webkit-flex: 1;
//  -ms-flex: 1;
//  flex: 1;
//  color: var(--light-grey);
//  .site-icon {
//    margin-right: 6px;
//    height: 36px;
//    vertical-align: middle;
//  }
//
//  .site-name {
//    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
//    font-weight: bold;
//    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
//  }
//}
//
//#nav #menus {
//  #search-button {
//    display: inline;
//    padding: 0 0 0 14px;
//  }
//
//  .menus_items {
//    display: inline;
//
//    .menus_item {
//      position: relative;
//      display: inline-block;
//      padding: 0 0 0 14px;
//    }
//
//    .menus_item .menus_item_child {
//      position: absolute;
//      right: 0;
//      display: none;
//      margin-top: 8px;
//      padding: 0;
//      width: max-content;
//      border-radius: 5px;
//      background-color: var(--sidebar-bg);
//      -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.5);
//      box-shadow: 0 5px 20px -4px rgba(0, 0, 0, 0.5);
//      animation: sub_menus 0.3s 0.1s ease both;
//
//      .site-page {
//        position: relative;
//        padding-bottom: 6px;
//        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
//        font-size: 0.78em;
//        cursor: pointer;
//      }
//
//      li a {
//        display: inline-block;
//        padding: 8px 16px;
//        width: 100%;
//        color: var(--font-color) !important;
//        text-shadow: none !important;
//      }
//    }
//  }
//
//  .site-page {
//    position: relative;
//    padding-bottom: 6px;
//    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
//    font-size: 0.78em;
//    cursor: pointer;
//  }
//
//  .site-page:not(.child):after {
//    position: absolute;
//    bottom: 0;
//    left: 0;
//    z-index: -1;
//    width: 0;
//    height: 3px;
//    background-color: #80c8f8;
//    content: '';
//    -webkit-transition: all 0.3s ease-in-out;
//    -moz-transition: all 0.3s ease-in-out;
//    -o-transition: all 0.3s ease-in-out;
//    -ms-transition: all 0.3s ease-in-out;
//    transition: all 0.3s ease-in-out;
//  }
//}
//
//// 中间的文字
//#page-header.full_page #site-info {
//  position: absolute;
//  top: 43% !important;
//  padding: 0 10px;
//  width: 100%;
//
//  #site-title {
//    text-align: center;
//    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
//    line-height: 1.5;
//    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
//    animation: titleScale 1s;
//    margin: 0;
//    color: var(--white);
//    font-size: 2.85em;
//  }
//
//  #site-subtitle {
//    font-size: 1.72em;
//    text-align: center;
//    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
//    line-height: 1.5;
//    font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft JhengHei', 'Microsoft YaHei', sans-serif;
//    animation: titleScale 1s;
//  }
//}
//
//#nav #toggle-menu {
//  display: none;
//  padding: 2px 0 0 6px;
//  vertical-align: top;
//}
//
//
//#page-header.nav-visible:not(.fixed) #nav {
//  -webkit-transition: all 0.5s;
//  -moz-transition: all 0.5s;
//  -o-transition: all 0.5s;
//  -ms-transition: all 0.5s;
//  transition: all 0.5s;
//  -webkit-transform: translate3d(0, 100%, 0);
//  -moz-transform: translate3d(0, 100%, 0);
//  -o-transform: translate3d(0, 100%, 0);
//  -ms-transform: translate3d(0, 100%, 0);
//  transform: translate3d(0, 100%, 0);
//}
//
//
//
//#page-header.nav-fixed #nav {
//  position: fixed;
//  top: -60px;
//  z-index: 91;
//  background: rgba(255,255,255,0.8);
//  -webkit-box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
//  box-shadow: 0 5px 6px -5px rgba(133,133,133,0.6);
//  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
//  -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
//  -o-transition: -o-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
//  -ms-transition: -ms-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
//  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
//}
//#page-header.nav-fixed #nav #blog-info {
//  color: var(--font-color);
//}
//#page-header.nav-fixed #nav #blog-info:hover {
//  color: #49b1f5;
//}
//#page-header.nav-fixed #nav #blog-info .site-name {
//  text-shadow: none;
//}
//#page-header.nav-fixed #nav a,
//#page-header.nav-fixed #nav #toggle-menu {
//  color: var(--font-color);
//  text-shadow: none;
//}
//#page-header.nav-fixed #nav a:hover,
//#page-header.nav-fixed #nav #toggle-menu:hover {
//  color: #49b1f5;
//}
//#page-header.nav-fixed.fixed #nav {
//  top: 0;
//  -webkit-transition: all 0.5s;
//  -moz-transition: all 0.5s;
//  -o-transition: all 0.5s;
//  -ms-transition: all 0.5s;
//  transition: all 0.5s;
//}
